<template>
  <div class="about">
    <div class="ctnTwo">
      <div style="height: 200px; margin-bottom: 50px">
        <span
          style="
            line-height: 200px;
            font-size: 25px;
            font-weight: 800;
            position: absolute;
            left: 500px;
            top: 110px;
            margin-right: 100px;
          "
          >精选商品列表</span
        >
        <AutoComplete
          v-model="value4"
          icon="ios-search"
          placeholder="请输入要搜索的内容"
          style="width: 500px; margin: 135px"
        >
          <div
            class="demo-auto-complete-item"
            v-for="item in data4"
            :key="item[0]"
          >
            <div class="demo-auto-complete-group">
              <span>{{ item.title }}</span>
              <a href="https://www.google.com/search?q=iView" target="_blank"
                >更多</a
              >
            </div>
            <Option
              v-for="option in item.children"
              :value="option.title"
              :key="option.title"
            >
              <span class="demo-auto-complete-title">{{ option.title }}</span>
              <span class="demo-auto-complete-count"
                >{{ option.count }} 人关注</span
              >
            </Option>
          </div>
          <a
            href="https://www.google.com/search?q=iView"
            target="_blank"
            class="demo-auto-complete-more"
            >查看所有结果</a
          >
        </AutoComplete>
      </div>
      <el-container>
        <el-main>
          <br />
          <div class="goodsList">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane
                :label="p.title"
                :name="p.name"
                v-for="(p, i) in titles"
                :key="i"
              >
                <div class="demo-image">
                  <div class="block" v-for="(p, i) in p.fits" :key="i" @click="todetails">
                    <el-image class="elImage" :src="p.url" :i="i"></el-image>
                    <br />
                    <br />
                    <span class="demonstration">{{ p.title }}</span>
                    <br />
                    <span class="demonstration">￥{{ p.price }}</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
      <div class="about_us">
        <button>更多商品 ></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value4: "",
      activeName: "first",
      data4: [
        {
          title: "话题",
          children: [
            {
              title: "人气的款式",
              count: 10000,
            },
            {
              title: "上新新品",
              count: 10600,
            },
          ],
        },
        {
          title: "问题",
          children: [
            {
              title: "尺码大小",
              count: 60100,
            },
            {
              title: "经典品是否上货",
              count: 30010,
            },
          ],
        },
      ],
      titles: [
        {
          title: "全部",
          name: "first",
          fits: [
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.0,
            },
          ],
        },
        {
          title: "上新",
          name: "second",
          fits: [
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },  
          ],
        },
        {
          title: "长裤",
          name: "third",
          fits: [
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },  
          ],
        },
        {
          title: "T恤",
          name: "fourth",
          fits: [
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },  
          ],
        },
        {
          title: "外套",
          name: "fifth",
          fits: [
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 1,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },
            {
              id: 2,
              url: require("../../public/about/demo.jpg"),
              title: "stretch twill ss shirt - drew字母刺绣复古工装短袖衬衫",
              price: 1099.00,
            },  
          ],
        },
      ],
    };
  },
  methods:{
    todetails:function()
			{
			this.$router.replace('/details')//点击注册按钮，跳转至注册页面
			}
  }
};
</script>

<style lang="scss" scoped>
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
  position: relative;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 6px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
  position: absolute;
  left: 5px;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}
.ctnTwo {
  width: 100%;
  height: 4500px;
  margin: 0 auto;
  overflow: hidden;
  background-color: white;
  // border: 1px solid brown;
  .goodsList {
    height: 3700px;
    width: 100%;
    // border: 1px solid green;
  }
  .demo-image {
    width: 100%;
    height: 3600px;
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: white;
    // border: 1px solid purple;
    .block {
      // border: 1px solid goldenrod;
      width: 25%;
      height: 700px;
      transition: all 0.6s; //设置动画执行的时间为0.6s
      cursor: pointer;
      overflow: hidden;
      .elImage {
        width: 95%;
        height: 80%;
      }
      .elImage:hover {
        transform: scale(1.05); //设置图片按照比例放大1.2倍
      }
    }
  }
  .about_us {
    width: 100%;
    height: 100px;
    button {
      width: 150px;
      height: 45px;
      color: rgb(141, 140, 140);
    }
    button:hover {
      background: black;
      color: white;
      animation: 5s linear infinite;
      border: none;
    }
  }
}
</style>
